{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'plugins/datatable/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datatable/js/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatable/js/dataTables.bootstrap.min.js' %}"></script>
    <script >
        $(function () {
            // datatable js 配置
            var dom = '<"col-xs-6 left-col-side"<"toolbar">><"col-xs-6 right-col-side"f>t<"col-xs-6 left-col-side"l><"col-xs-6 right-col-side"p>r';
            var tb_parking = $('#tb_parking').DataTable({
                "dom": dom,
                "autoWidth": true,
                "searching": true,
                "columnDefs": [
                    { "render": function(data, type, row) {
                            var parking_num = row[1];
                            var btnstr = "<a href='javascript:void(0);' class='btn btn-default btn-sm parking-detail' data-parking='"+parking_num+ "' "
                                    +"data-toggle='tooltip' data-placement='top' title='车场设备查看'"
                                    +"><i class='fa fa-eye' title='车场设备查看' ></i></a> "
                            if('{{ request.session.user_permission.post }}' == '1'){
                                btnstr +="<a href='javascript:void(0);' class='btn btn-default btn-sm parking-edit' data-parking='"+parking_num+ "' "
                                    +"data-toggle='tooltip' data-placement='top' title='编辑'"
                                    +"><i class='fa fa-edit' title='编辑' ></i></a> "
                            }
                            if('{{ request.session.user_permission.delete }}'=='1'){
                                btnstr += "<a href='javascript:void(0);' class='btn btn-default btn-sm parking-remove' data-parking='"+parking_num+ "' "
                                    +"data-toggle='tooltip' data-placement='top' title='删除'"
                                    +"><i class='fa fa-trash-o' title='删除' ></i></a> "
                            }
                            return btnstr
                        },
                        "targets": 8,
                        "className": "align-center"
                    }
                  ],
            });
            if('{{ request.session.user_permission.put }}'=='1'){
                var toolstr = "<button type='button' class='btn btn-primary btn-sm parking-add'><i class='fa fa-plus'></i> 新增车场</button>"
                $("div.toolbar").html(toolstr);
            }
            // datatable js end

            // 按钮事件绑定
            $('.parking-detail').on('click',function () {
                var parking_num = $(this).data('parking');
                window.location.href = "{% url 'prc_list' %}"+parking_num;
            })
            $('.parking-edit').on('click', function () {
                var parking_num = $(this).data('parking')
                window.location.href = "{% url 'parking_form' %}?parking_num="+parking_num;
            })
            $('.parking-remove').on('click', function () {
                var parking_num = $(this).data('parking');
                layer.confirm('您确认要删除此车场吗？',{icon:3}, function () {
                    $.post("{% url 'parking_remove' %}", {'parking_num': parking_num}, function(ret){
                    if(ret.status==1){
                        layer.msg('删除成功！');
                        window.location.reload();
                    }else{
                        layer.alert(ret.msg, {icon:2})
                    }
                },'json');
                })
            });
            $('.parking-add').on('click', function () {
                window.location.href = "{% url 'parking_form' %}"
            });
        })

    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        车场管理
      </h1>
      <ol class="breadcrumb">
        <li><i class="fa fa-dashboard"></i> 车场管理</li>
        <li class="active">车场列表</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">车场列表</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
             <table id="tb_parking" class="table table-hover table-bordered">
                <thead>
                   <th>序号</th>
                   <th>车场编号</th>
                   <th>车场名称</th>
                   <th>车场地址</th>
                   <th>出入口数量</th>
                   <th>PRC设备数量</th>
                   <th>创建时间</th>
                   <th>更新时间</th>
                   <th>操作</th>
                </thead>
                <tbody>
                    {% for parking in parking_list %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ parking.parking_num }}</td>
                        <td>{{ parking.name }}</td>
                        <td>{{ parking.address }}</td>
                        <td>{{ parking.port_num }}</td>
                        <td>{{ parking.PRC_num }}</td>
                        <td>{{ parking.create_at|date:'Y-m-d h:i a' }}</td>
                        <td>{{ parking.update_at|date:'Y-m-d h:i a' }}</td>
                        <td></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </section>
    <!-- /.content -->
  </div>


{% endblock %}